@if (memberService.member(); as member) {
<div class="flex gap-6">
    <div class="card bg-base-100 flex flex-col h-[85vh] w-1/4">
        <img src="{{member.imageUrl || '/user.png'}}" alt="image of member"
            class="rounded-full mx-10 mt-3 object-cover">
        <div class="card-body">
            <div class="flex flex-col items-center">
                <div class="flex text-2xl text-primary items-center">
                    {{member.displayName}}, {{member.dateOfBirth | age}}
                    @if (presenceService.onlineUsers().includes(member.id)) {
                    <span class="status status-success status-xl ml-3"></span>
                    }
                </div>

                <div class="text-sm">
                    {{member.city}}, {{member.country}}
                </div>
            </div>

            <div class="divider"></div>

            <ul class="menu rounded-box w-full text-xl">
                <li><a routerLink="profile" routerLinkActive="text-primary">Profile</a></li>
                <li><a routerLink="photos" routerLinkActive="text-primary">Photos</a></li>
                @if (!isCurrentUser()) {
                <li><a routerLink="messages" routerLinkActive="text-primary">Messages</a></li>
                }
            </ul>
        </div>
        <div class="card-actions justify-between gap-2 px-2 mb-3">
            <button routerLink="/members" class="btn btn-info flex-1">Go back</button>
            <button (click)="likesService.toggleLike(member.id)" [class.btn-error]="hasLiked()"
                [class.btn-success]="!hasLiked()" class="btn flex-1">{{hasLiked() ? 'Remove like' : 'Like
                user'}}</button>
        </div>
    </div>

    <div class="card bg-base-100 w-3/4 p-6 flex flex-col h-[85vh]">
        <div class="flex justify-between items-center">
            <h3 class="card-title text-3xl text-primary">{{title()}}</h3>
            @if (isCurrentUser()) {
            <button (click)="memberService.editMode.set(!memberService.editMode())" class="btn btn-outline btn-primary">
                {{memberService.editMode() ? 'Cancel' : 'Edit'}}
            </button>
            }
        </div>

        <div class="divider"></div>
        <div class="h-full">
            <router-outlet />
        </div>
    </div>

</div>
} @else {
<div>Member not found</div>
}